import Vue from 'vue'
// 定义一个自定义v-draggable指令
Vue.directive('draggable', {
  bind(el) {
    let dom=el.firstElementChild

    let header=dom.firstElementChild
    el.style.position = 'absolute';
    header.style.cursor = 'move';
    let startX, startY, initialMouseX, initialMouseY;
    
    // 监听鼠标按下事件
    header.addEventListener('mousedown', (e) => {
      startX =el.offsetLeft;
      startY = el.offsetTop;
      initialMouseX = e.clientX;
      initialMouseY = e.clientY;
      // 监听鼠标移动事件
      document.addEventListener('mousemove', handleMouseMove);
      // 监听鼠标松开事件
      document.addEventListener('mouseup', handleMouseUp);
    });
    
    function handleMouseMove(e) {
      const dx = e.clientX - initialMouseX;
      const dy = e.clientY - initialMouseY;
      el.style.left = `${startX + dx}px`;
      el.style.top = `${startY + dy}px`;


    }  
    function handleMouseUp() {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    }
  }
});